body{
    height: 4000px;
}
.box{
    border:1px solid red;
    width: 400px;
    height: 400px;
    background-image: url("../img/bg1.jpg");
    /* 按照比例缩放，到一边覆盖 */
    background-size: contain;
    background-repeat: no-repeat
}
.box1{
    border:1px solid red;
    width: 200px;
    height: 500px;
    background-image: url("../img/bg1.jpg");
    /* 按照比例缩放，到一边覆盖 */
    background-size: cover;
    background-repeat: no-repeat
}
.box2{
    width: 800px;
    height: 400px;
    background-image: url("../img/bj2.png");
    background-repeat: repeat-y;
}
.box3{
    height: 483px;
    background-image: url("../img/bg3.png");
    background-repeat: repeat-x;
}
.box4{
    border:1px solid red;
    width: 400px;
    height: 400px;
    background-image: url("../img/bj2.png");
    background-repeat: no-repeat;
    background-position: left top;
}
.box5{
    width: 42px;
    height: 32px;
    background-image: url(../img/sp.jpg);
    background-position: -56px 456px;
}
.box5:hover{
    background-position: -125px 456px;
}
.box6{
    width: 42px;
    height: 32px;
    background-image: url(../img/sp.jpg);
    background-position: -125px 456px;
}
.box7{
    height: 800px;
    background-image: url(../img/bg1.jpg);
    background-attachment: fixed;
}
.box8{
    border: 10px dotted green;
    height: 600px;
    padding:50px;
    width: 800px;
    /* background-image: url(../img/bg1.jpg);
    background-color: red;
    background-clip: border-box; */
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#87e0fd+0,7248ce+28,87e0fd+61,05abe0+100 */
    background: linear-gradient(to right,  #87e0fd 0%,#7248ce 28%,#87e0fd 61%,#05abe0 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */


}